<template>
    <div class="main">
        <myHeader />
        <div class="content-wrapper">
            <mySidebar />
            <div class="content" :class="{'content-collapse':collapse}">
                <div class="tags">
                    <myTags />
                </div>
                <div class="content-info">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js';
import myHeader from '@/components/header/index.vue'
import mySidebar from '@/components/sidebar/index.vue'
import myTags from '@/components/tags/index.vue'
import { mapState, mapActions } from 'vuex'
export default {
    components: {
        myHeader,
        mySidebar,
        myTags
    },
    data() {
        return {
            collapse: false,
            includeList: [],
        }
    },
    computed:{
        ...mapState(['tagsList'])
    },
    watch:{
        tagsList(newValue, oldValue){
            this.includeList = [];
            for(let i = 0; i < this.tagsList.length; i ++){
                this.tagsList[i].name && this.includeList.push(this.tagsList[i].name);
            }
        },
    },
    created() {
        bus.$on('collapse', msg => {
            this.collapse = msg;
        })
    },
}
</script>

<style lang="less">
    .main{
        min-height: 100vh;
        .content-wrapper{
            min-height: 100vh;
            .content{
                position: absolute;
                left: 220px;
                top: 70px;
                right: 0;
                transition: left .3s ease-in-out;
                .tags{
                    background-color: #fff;
                    position: fixed;
                    left: 220px;
                    top: 70px;
                    right: 0;
                    transition: left .3s ease-in-out;
                    height: 36px;
                }
                &.content-collapse{
                    left: 65px;
                    .tags{
                        left: 65px;
                    }
                }
                .content-info{
                    padding: 46px 10px 0 10px;
                    min-height: 100%;
                    box-sizing: border-box;
                }
            }
        }
    }
</style>